// Examples

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin examples {
  display: block;
  .#{$prefix}-html {
    padding: 1rem;
    margin: 1rem 0;
    border: $--x-border-base;
    border-radius: 0.125rem;
    position: relative;
  }
  .#{$prefix}-tools {
    position: absolute;
    position: absolute;
    bottom: -0.875rem;
    left: 0;
    display: flex;
    width: 100%;
    justify-content: center;
    .x-buttons {
      background-color: $--x-background;
      padding: 0 0.25rem;
    }
  }
  .#{$prefix}-code {
    padding: 1rem 0;
    > x-tabs > .x-tabs {
      border-radius: 0.125rem;
      > .x-tabs-contents > .x-tab-content > .x-highlight {
        border-top: 0;
        > pre {
          background-color: transparent;
        }
      }
    }
  }
  .#{$prefix}-info {
    padding: 1rem;
    border: $--x-border-base;
    border-radius: 0.125rem;
    background-color: $--x-background-a100;
    > p {
      margin: 0.25rem 0 0;
      &:first-of-type {
        margin-top: 0;
      }
    }
    > ul {
      margin: 0.25rem 0;
      > li {
        list-style-type: square;
        margin-left: 1.25rem;
        line-height: 1.75rem;
      }
    }
  }
  > x-tabs > .x-tabs {
    width: 100%;
    > .x-tabs-list {
      border: none;
      
    }
    > .x-tabs-contents {
      > x-tab-content > x-tabs > .x-tabs {
        &-top {
          > .x-tabs-list {
            border: none;
            background: rgba(0, 0, 0, 0.05);
          }
          @include tabs-list();
        }
      }
    }
    &-left,
    &-top {
      @include tabs-list();
    }
    &-left {
      > .x-tabs-list {
        padding: 0;
        > x-slider > .x-slider > .x-slider-scroll > ul {
          min-width: 6rem;
        }
      }
      // .#{$prefix}-html {
      //   margin: 0 0 0 1rem;
      //   border: 0;
      //   padding: 0;
      // }
      // .#{$prefix}-info {
      //   margin: 1rem 0 0 1rem;
      // }
      // .#{$prefix}-code {
      //   margin: 1rem 0 0 1rem;
      //   padding: 0;
      // }
    }
  }
}

@mixin tabs-list() {
  > .x-tabs-list {
    > x-slider {
      > .x-slider-row,
      > .x-slider-column {
        > .x-slider-scroll > ul > li.x-slider-highlight {
          border-radius: $--x-border-radius;
          border: $--x-border-base;
        }
      }
    }
  }
}
